<!--中医科诊室屏模板编辑项-->
<template>
  <div class="header-info">
    <!--区域设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色" v-if="false">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
    </div>

    <!--医院LOGO-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医院LOGO设置</el-divider>
      </div>

      <template v-for="(item, index) in optionsInfo.hospitalLogo">
        <el-form-item :label="item.label" class="picture-upload-set" :key="index">
          <el-button type="primary" @click="handleSelect('hospitalLogo',item,index)">
            {{ item.label }}
          </el-button>

          <div class="picture-wrap" :class="{'picture-content-wrap': !!(item?.logoInfo?.val?.url)}">
            <template v-if="codeViewShow(item,'hospitalLogo')">
              <img :src="`${item?.logoInfo?.val?.url}`" alt="互联网医院"/>
              <p class="icon-wrap" @click="handleDeletePicture('hospitalLogo', index)">
                <i class="el-icon-close icon-delete"/>
              </p>
            </template>
            <template v-else>
              <div
                  class="el-upload el-upload--text"
                  @click="handleSelect('hospitalLogo',item,index)"
              >
                <i class="el-icon-plus avatar-uploader-icon"/>
              </div>
            </template>
          </div>
        </el-form-item>
      </template>
    </div>

    <!--云医院二维码设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">云医院二维码设置</el-divider>
      </div>
      <template v-for="(item, index) in optionsInfo.hospitalCode">
        <el-form-item label="二维码名称" class="column-info">
          <el-input
              size="small"
              class="hide-spin-button"
              v-model="item['name']"
          />
        </el-form-item>
        <el-form-item :label="item.label" class="picture-upload-set" :key="index">
          <el-button type="primary" @click="handleSelect('hospitalCode',item,index)">
            {{ item.label }}
          </el-button>

          <div class="picture-wrap" :class="{'picture-content-wrap': !!(item?.codeInfo?.val?.url)}">
            <template v-if="codeViewShow(item,'hospitalCode')">
              <img :src="`${item?.codeInfo?.val?.url}`" alt="互联网医院"/>
              <p class="icon-wrap" @click="handleDeletePicture('hospitalCode', index)">
                <i class="el-icon-close icon-delete"/>
              </p>
            </template>
            <template v-else>
              <div
                  class="el-upload el-upload--text"
                  @click="handleSelect('hospitalCode',item,index)"
              >
                <i class="el-icon-plus avatar-uploader-icon"/>
              </div>
            </template>
          </div>
        </el-form-item>
      </template>
    </div>

    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室&诊室号&诊室名显示</el-divider>
      </div>
      <el-form-item label="字段组合">
        <el-switch v-model="optionsInfo['comb']"/>
      </el-form-item>
      <template v-if="true">
        <template v-if="optionsInfo['comb']">
          <el-form-item label="诊室号&诊室名(1)" class="column-info">
            <el-select v-model="optionsInfo.roomNameKey" placeholder="请选择" clearable>
              <el-option
                  v-for="item in roomOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科室(2)" class="column-info">
            <el-select v-model="optionsInfo.deptNameKey" placeholder="请选择" clearable>
              <el-option
                  v-for="item in deptOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="科室&诊室号&诊室名" class="column-info-dept-romm">
            <el-select v-model="optionsInfo.checkList" placeholder="请选择" clearable multiple :multiple-limit="2"
                       v-if="false">
              <el-option
                  v-for="item in combOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>

            <el-checkbox-group v-model="optionsInfo['checkList']" :max="2" :min="1">
              <Draggable
                  class="list-group"
                  @end="handleDragEnd"
                  :animation="100"
                  :list="optionsInfo['combOptions']"
              >
                <el-checkbox
                    v-for="(item,index) in optionsInfo['combOptions']"
                    :key="index"
                    :label="item.value"
                    :disabled="isDisabled(item.value)"
                >
                  {{ item.label }}
                  <i class="el-icon-thumb"></i>
                </el-checkbox>
              </Draggable>
            </el-checkbox-group>

          </el-form-item>
        </template>
      </template>

      <template v-if="false">
        <el-form-item label="科室&诊室号&诊室名" class="column-info" v-if="!optionsInfo.checkListOnoff">
          <el-checkbox-group
              :max="1"
              v-model="optionsInfo.checkList"
              v-if="topOptions&&topOptions.length"
          >
            <el-checkbox
                v-for="item in topOptions"
                :label="item.value"
                :key="item.value"
                v-if="item.shown"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!--科室字段Key-->
        <template v-if="optionsInfo['checkList'].includes(1)">
          <deptNameKeyEditor
              :designer="designer"
              :selected-widget="selectedWidget"
              :option-model="optionModel"
          />
        </template>
        <!--号别字段Key-->
        <template v-if="optionsInfo['checkList'].includes(2)">
          <el-form-item label="号别类型" class="column-info">
            <div class="options-info">
              <el-radio-group v-model="optionsInfo.registerObjNameKey">
                <el-radio
                    :label="item.dictValue"
                    :value="item.dictValue"
                    :key="item.dictValue"
                    v-for="item in registerObjNameOptions"
                >
                  {{ item.dictLabel }}
                </el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="号别来源" class="column-info">
            <el-select
                placeholder="请选择"
                v-model="optionsInfo['registerSource']"
            >
              <el-option
                  v-for="item in registerSourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
              >
                {{ item.label }}
                <template v-if="!item.disabled">
                  <el-tooltip
                      class="item"
                      effect="dark"
                      content="Bottom Center 提示文字"
                      placement="bottom"
                  >
                    <div slot="content">
                      如果当前患者不存在则取当前医生关联的上一个就诊患者
                    </div>
                    <el-button class="tooltip-icon">
                      <i class="el-icon-warning"/>
                    </el-button>
                  </el-tooltip>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <!--诊室字段Key-->
        <template v-if="optionsInfo['checkList'].includes(3)">
          <roomNameKeyEditor
              :designer="designer"
              :selected-widget="selectedWidget"
              :option-model="optionModel"
          />
        </template>
      </template>

    </div>

    <!--医生设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生设置</el-divider>
      </div>

      <el-form-item label="医生显示顺序设置" class="column-info">
        <el-select v-model="optionsInfo['doctorOrder']" placeholder="请选择">
          <el-option
              v-for="item in doctorOrder"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="医生名字字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.doctorNameFontSize"
        />
      </el-form-item>
      <el-form-item
          label="医生名字粗细"
          class="column-info"
      >
        <el-select
            v-model="optionsInfo['doctorNameFontWeight']"
            placeholder="请选择"
        >
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="医生描述字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.doctorDescribeFontSize"
        />
      </el-form-item>
      <el-form-item
          label="医生描述粗细"
          class="column-info"
      >
        <el-select
            v-model="optionsInfo['doctorDescribeFontWeight']"
            placeholder="请选择"
        >
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </div>

    <!--候诊就诊设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊就诊设置</el-divider>
      </div>
      <el-form-item
          label="字体粗细"
          class="column-info"
      >
        <el-select
            v-model="optionsInfo['patientFontWeight']"
            placeholder="请选择"
        >
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="患者标题字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.patientSignFontSize"
        />
      </el-form-item>
      <el-form-item label="患者内容字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.patientContentFontSize"
        />
      </el-form-item>
      <el-form-item label="就诊患者" class="column-info">
        <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo['currentPatientContent']"
        />
      </el-form-item>
      <el-form-item label="待诊患者" class="column-info">
        <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo['waitingPatientContent']"
        />
      </el-form-item>
      <el-form-item label="候诊类型" class="column-info">
        <el-radio-group v-model="optionsInfo.waitPatientType">
          <el-radio
              :label="item.value"
              v-for="item in waitPatientTypeOptions"
              :key="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </div>


    <template v-if="optionsInfo['layerNameKey'] === 'room-call-patient'">
      <template v-for="(item, key, index) in optionsInfo['layerInfo']">
        <div :key="index" class="list-item-setting">
          <div class="title-info">
            <el-divider content-position="left">
              {{ key === "current" ? "就诊弹层设置" : "候诊弹层设置" }}
            </el-divider>
          </div>
          <el-form-item class="column-info" :label='key === "current" ? "就诊患者标题" : "候诊患者标题" '>
            <el-input
                size="small"
                placeholder="请输入内容"
                v-model="item.content"
            />
          </el-form-item>

          <el-form-item label="显示" v-if="false">
            <el-switch v-model="item.display"/>
          </el-form-item>

          <el-form-item label="标题字号">
            <el-input-number
                :min="14"
                size="small"
                class="hide-spin-button"
                v-model="item.fontSize"
            />
          </el-form-item>

          <el-form-item label="标题字体粗细" class="column-info">
            <el-select
                v-model="item['titleFontWeight']"
                placeholder="请选择"
            >
              <el-option
                  v-for="item in fontWeightOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标题背景颜色" class="column-info">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="item.backgroundColor"
            />
          </el-form-item>

          <el-form-item label="标题字体颜色" class="column-info">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="item.color"
            />
          </el-form-item>

          <el-form-item label="内容字体颜色" class="column-info">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="item.patientColor"
            />
          </el-form-item>

          <el-form-item label="内容字体字号" class="column-info">
            <el-input-number
                :min="14"
                size="small"
                class="hide-spin-button"
                v-model="item.patientFontSize"
            />
          </el-form-item>

          <el-form-item label="内容字体粗细" class="column-info">
            <el-select
                v-model="item['patientFontWeight']"
                placeholder="请选择"
            >
              <el-option
                  v-for="item in fontWeightOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </template>

    </template>

    <!--选择图片的弹层-->
    <SelectPicture
        :info="pictureInfo.info"
        :visible="pictureInfo.visible"
        @handleSure="handleSure"
        @handleCancel="handleCancel"
    />
  </div>
</template>

<script>
import Draggable from "vuedraggable"
import {v4 as uuid} from 'uuid';
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";
import roomNameKeyEditor from "../basicInfo/roomNameKey-editor.vue";
import deptNameKeyEditor from "../basicInfo/deptNameKey-editor.vue";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import {combOptions} from "@c/public/form-designer/devType/datas-types";

export default {
  name: "DRCTCMInfoConfig-editor",
  components: {Draggable, SelectPicture, roomNameKeyEditor, deptNameKeyEditor},
  componentName: "DRCTCMInfoConfig-editor",
  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      optionsInfo: Object(),
      checkList: [],
      topOptions: [
        {
          shown: true,
          value: 1,
          label: "科室",
        },
        {
          shown: false,
          value: 2,
          label: "号别",
        },
        {
          shown: true,
          value: 3,
          label: "诊室",
        },
      ],
      constantDic: constantDic,
      predefineColors: types["predefineColors"],
      doctorOrder: [
        {
          value: 1,
          label: "医生:顺序优先",
        },
        {
          value: 2,
          label: "医生:时间优先",
        },
      ],
      registerSourceOptions: [
        {
          value: 1,
          label: "当前医生所在科室号别",
        },
        {
          value: 2,
          label: "当前医生呼叫患者号别",
        },
      ],
      waitPatientTypeOptions: [
        {
          value: 1,
          label: "诊室等候",
        },
        {
          value: 2,
          label: "候诊列表",
        },
      ],
      fontWeightOptions: types["fontWeightOptions"],
      // 科室&诊室组合
      combOptions: types['combOptions'],
      // 科室
      deptOptions: types['deptOptions'],
      // 诊室
      roomOptions: types['roomOptions'],
      pictureInfo: {
        key: uuid(),
        info: Object(),
        visible: false,
      },
    };
  },

  computed: {
    isDisabled() {
      return function (val) {
        let arr = Array();
        return arr.includes(val);
      }
    },

    // 号别可选字段
    registerObjNameOptions() {
      return this.$store.getters["templateDetails/getRegisterObjNameOptions"];
    },

    // 二维码view
    codeViewShow() {
      return function (item, type) {
        switch (type) {
          case "hospitalLogo":
            return !!(item?.logoInfo?.val?.url);
          case "hospitalCode":
            return !!(item?.codeInfo?.val?.url);
        }
      }
    }
  },

  methods: {
    // 选择图片
    handleSelect(val, row, number) {
      let params = Object();
      let contentInfo;
      switch (val) {
        case "hospitalCode":
          contentInfo = !!(row?.codeInfo) ? (row?.codeInfo) : Object();
          Reflect.set(params, "updataType", val);
          Reflect.set(params, "type", "image");
          Reflect.set(params, "multiple", false);
          Reflect.set(params, "content", contentInfo);
          Reflect.set(params, "number", number);
          Reflect.set(this.pictureInfo, "key", uuid());
          Reflect.set(this.pictureInfo, "visible", true);
          Reflect.set(this.pictureInfo, "info", params);
          break;
        case "hospitalLogo":
          contentInfo = !!(row?.logoInfo) ? (row?.logoInfo) : Object();
          Reflect.set(params, "updataType", val);
          Reflect.set(params, "type", "image");
          Reflect.set(params, "multiple", false);
          Reflect.set(params, "content", contentInfo);
          Reflect.set(params, "number", number);
          Reflect.set(this.pictureInfo, "key", uuid());
          Reflect.set(this.pictureInfo, "visible", true);
          Reflect.set(this.pictureInfo, "info", params);
          break;
      }
    },

    // 删除图片
    handleDeletePicture(key, number) {
      let {hospitalCode, hospitalLogo} = this.optionsInfo;
      switch (key) {
        case 'hospitalCode':
          hospitalCode[number]['codeInfo'] = Object();
          Reflect.set(this.optionsInfo, key, hospitalCode);
          break;
        case 'hospitalLogo':
          hospitalLogo[number]['logoInfo'] = Object();
          Reflect.set(this.optionsInfo, key, hospitalLogo);
          break;
      }
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.pictureInfo, "visible", false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {hospitalCode, hospitalLogo} = this.optionsInfo;
      let {number = 0, key} = valInfo;
      switch (key) {
        case "hospitalCode":
          hospitalCode[number]['codeInfo'] = valInfo;
          Reflect.set(this.optionsInfo, key, hospitalCode);
          break;
        case 'hospitalLogo':
          hospitalLogo[number]['logoInfo'] = valInfo;
          Reflect.set(this.optionsInfo, key, hospitalLogo);
          break;
      }
    },

    handleDragEnd() {
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
//垂直显示
.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;

    .el-select {
      width: 100%;
    }

    .el-radio-group {
      .el-radio {
        width: 100%;
        padding: 8px 0;
      }
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

//科室-诊室-号别
.column-info-dept-romm {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;
    .list-group{
      display: flex;
      flex-direction: column;
    }
    .el-checkbox{
      padding-top: 4px;
      padding-bottom: 4px;
      i{
        padding-left: 10px;
      }
    }
  }
}

//备注-信息
.tooltip-icon {
  border: none;
  background: transparent;
  padding: 0 12px 0 12px;
  font-size: 16px;
  border-radius: 0;
  color: #e6a23c;
}

//互联网医院
.picture-upload-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      width: 108px;
      height: 108px;

      img {
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

    .picture-content-wrap{
      border-radius: 6px;
      overflow: hidden;
      border: 1px dashed #c0ccda;
    }
  }
}
</style>